<!--订单变更记录弹窗-->
<template>
  <el-dialog
    title="变更记录"
    v-if="dialogVisible"
    :visible.sync="dialogVisible"
    width="70%"
    :before-close="handleClose"
    v-dialogDrag
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="dialogBody" v-loading="loading">
      <agGridComponents ref="dialogAgGrid" :getColumnDefs="dialogColumnDefs" :isColFit="true"></agGridComponents>
    </div>
  </el-dialog>
</template>

<script>
import agGridComponents from "@/components/agGridComponents.js"
import _Api from "@/api"
import Msg from "@/public/message"
export default {
  data () {
    return {
      loading: false
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    purOrdNo: {
      type: String
    }
  },
  methods: {
    handleClose () {
      this.$emit('closeDialog')
    },
    // 获取变更记录
    getChangeRecord (orderNo) {
      this.loading = true
      _Api.getOrderChange({ purOrdNo: orderNo }).then(res => {
        this.loading = false
        let data = res.data
        if (data.code == 1) {
          this.$refs.dialogAgGrid.gridOptions.api.setRowData(data.rows)
        } else {
          Msg.showErrorMsg(data.info)
        }
      }).catch(err => {
        this.loading = false
        Msg.showErrorMsg(err.data.message)
      })
    }
  },
  components: {
    agGridComponents
  },
  beforeMount () {
    this.dialogColumnDefs = [
      { headerName: "行号", field: "mxNum", width: 70 },
      { headerName: "变更操作", field: "operate", width: 100 },
      { headerName: "变更内容", field: "fieldName", width: 100 },
      { headerName: "新值", field: "newValue", width: 80 },
      { headerName: "旧值", field: "oldValue", width: 80 },
      { headerName: "变更时间", field: "createDate", width: 140, tooltipField: 'createDate' },
      { headerName: "确认人", field: "modifyer", width: 120, tooltipField: 'modifyer' },
      { headerName: "确认时间", field: "modifyDate", width: 140, tooltipField: 'modifyDate' },
    ]
    this.getChangeRecord(this.purOrdNo)
  }
};
</script>

<style>
</style>